<template>
  <div class="footer-container">
    <div class="footer-icon">
      <div>
        <!-- <van-button icon="photo-o" /> -->
        <!-- <van-button icon="link-o" />
        <van-button icon="volume-o" />
        <van-button icon="good-job-o" /> -->
        <!-- <van-button class="icons_button"><van-icon size="25" name="smile-o" /></van-button> -->
        <van-button class="icons_button"
          ><!-- 表情包弹框及组件 -->
          <V3Emoji :custom-size="customSize" @click-emoji="onVue3Emoje" :recent="true"></V3Emoji
        ></van-button>
        <!-- 上传图片 -->
        <!-- 仅接受图片 -->
        <UploadImg />
        <!-- 上传文件 -->
        <UploadFile />
        <!-- 语音识别 -->
        <van-button class="icons_button"><van-icon size="25" name="volume-o" /></van-button>
        <van-button class="icons_button" @click="goodjob"
          ><van-icon size="25" name="good-job-o"
        /></van-button>
      </div>
      <!-- <van-button class="icons_button maikefeng"
        ><i id="microphone" class="iconfont icon-maikefeng"></i
      ></van-button> -->
    </div>
    <!-- <div class="input-area">
                <input type="text" id="message-input" placeholder="请输入">
            </div> -->
    <van-field
      class="textarea_box"
      v-model="message"
      rows="1"
      :autosize="{ maxHeight: 50 }"
      type="textarea"
      placeholder="请输入您的问题"
      @keydown="enter"
    />
    <van-button class="send_button" color="#b7b7b7" type="primary" @click="submit">发送</van-button>
    <!-- 弹框组件 -->
    <van-dialog v-model:show="showD" @confirm="confirmD">
      <div class="dia_evaluate">
        <div>你对本次的服务满意吗？</div>
        <van-rate v-model="satisfaction" color="#ffd21e" />
        <div v-if="satisfaction === 0" class="dia_text">请选择评价</div>
        <div v-if="satisfaction === 1" class="dia_text">极差</div>
        <div v-if="satisfaction === 2" class="dia_text">较差</div>
        <div v-if="satisfaction === 3" class="dia_text">一般</div>
        <div v-if="satisfaction === 4" class="dia_text">满意</div>
        <div v-if="satisfaction === 5" class="dia_text">非常满意</div>
        <van-field
          v-model="messageDia"
          rows="1"
          type="textarea"
          autosize
          placeholder="恳请您的意见和建议"
          class="custom-field"
        />
      </div>
    </van-dialog>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import V3Emoji from 'vue3-emoji'
import 'vue3-emoji/dist/style.css'
// import { showToast } from 'vant'
import UploadImg from './uploadImg.vue'
import UploadFile from './uploadFile.vue'
import { chatListStore } from '@/stores/chatMsg'
const { addChat } = chatListStore()
const message = ref('')
const showD = ref(false)
const satisfaction = ref(0)
const messageDia = ref('')
// 自定义表情包大小
const customSize = {
  'V3Emoji-width': '300px',
  'V3Emoji-height': '20rem',
  'V3Emoji-fontSize': '1.5rem',
  'V3Emoji-itemSize': '30px',
}
// 选择表情包
const onVue3Emoje = (val) => {
  message.value += val
}
// 语音识别
//测试语音识别

// 点赞，服务满意评价
const goodjob = () => {
  showD.value = true
}
// 提交评价
const confirmD = () => {
  satisfaction.value = 0
}

// 发送
const submit = () => {
  // console.log(message.value)
  if (!message.value.trim()) return // 如果没有输入内容，就直接结束
  // 添加用户消息到聊天列表
  addChat({
    role: 'user',
    msg: message.value,
  })
  message.value = ''
  // showToast({
  //   message: '发送成功',
  //   icon: 'success',
  //   duration: 1000,
  // })
}
// 监听键盘enter事件
const enter = (e) => {
  // console.log(e, 'keydown')
  if (e.keyCode === 13) {
    submit()
  }
}
</script>
<style scoped lang='scss'>
.footer-container {
  position: fixed;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  background-color: #efefef;
}
.footer-icon {
  width: 100vw;
  display: flex;
  justify-content: space-between;
  padding: 10px 8px;
  // background-color: #efefef;
}
.textarea_box {
  margin-bottom: 7px;
}
.send_button {
  margin-bottom: 5px;
  width: 63px;
  height: 35px;
}
.icons_button {
  // margin-bottom: 5px;
  width: 35px;
  height: 35px;
  background-color: #eee;
  margin-right: 5px;
}
.icons_button.maikefeng {
  margin-right: 0;
}
#microphone,
#icon-tupian1 {
  font-size: 25px;
}
#icon-tupian1 {
  color: red;
}
.dia_evaluate {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}
.dia_text {
  color: #ffd21e;
  margin-top: 5px;
}
// 输入框占位符对齐方式
.custom-field textarea::placeholder {
  text-align: center !important;
  color: #ffd21e;
}
.custom-field {
  margin-top: 10px;
  width: 80%;
  border-radius: 6px;
  border: 1px solid #eee;
}
</style>